<template>
  <div class="visitsDemoBox">
    <!-- 访问时长统计 -->
    <div ref="visitsDemo" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
import { getLatency } from "@/utils/httpUtils";
import * as echarts from "echarts";

export default {
  data() {
    return {


    };
  },
  mounted() {
    this.addTabs();
  },
  methods: {
    addTabs() {
      let param = {
        "monitorQueryType": "Avg_Latency",
        "dateFrom": "now-1w", "dateTo": "now",
        "apiId": "",
        "userId": ""
      }
      let xData = []
      let yData = []
      getLatency(param).then((res) => {
        res.monitorTimeRecords.map(function (item) {
          item.result.latency ? item.result.latency : item.result.latency = 0
          xData.push(item.result.latency)
          yData.push(item.time.slice(5, 10).replaceAll('-', '/'))
        })
        console.log(xData,yData);
        const chartDom = this.$refs.visitsDemo;
        this.myChart = echarts.init(chartDom);

        let option = {
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: yData,
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "rgba(230, 247, 255, 0.50)",
              fontSize: 16,
            },
            // y轴的分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(230, 247, 255, 0.20)",
              },
            },
          },
          series: [
            {
              data: xData,
              type: 'line',
              name: '时延'
            },
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            show: true,
            data: ['时延'],
            textStyle: {
              color: "#fff",
              fontSize: "14px"
            }
          },
        };
        this.myChart.setOption(option); // 更新图表数据

      });




    },
  },
};
</script>

<style scoped>
.visitsDemoBox {
  position: relative;
}
.visitsDemoBox .tablist {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 999;
  display: flex;
  color: #fff;
}
.visitsDemoBox .tablist .tabs {
  margin-right: 5px;
  font-size: 15px;
  cursor: pointer;
}
.active {
  color: #198ef8;
  border-bottom: 1px solid #198ef8;
}

</style>
